@pionjs/pion
Advanced tools
React's Hooks API but for standard web components and lit-html or hyperHTML. Forked from haunted.
📚 Read the Docs 📖
<html lang="en">
<my-counter></my-counter>
<script type="module">
import { html } from 'https://unpkg.com/lit?module';
import { component, useState } from 'https://unpkg.com/@pionjs/pion';
function Counter() {
const [count, setCount] = useState(0);
return html`
<div id="count">${count}</div>
<button type="button" @click=${() => setCount(count + 1)}>
Increment
</button>
`;
}
customElements.define('my-counter', component(Counter));
</script>
</html>
More example integrations can be found in this gist.
pion supports the same API as React Hooks. The hope is that by doing so you can reuse hooks available on npm simply by aliasing package names in your bundler's config.
Currently pion supports the following hooks:
// Or another renderer, see Guides
type Renderer = (element: Element) => TemplateResult;
interface Options {
baseElement: HTMLElement;
observedAttributes: string[];
useShadowDOM: boolean
}
declare function component(
renderer: Renderer,
options: Options
): Element;
declare function component<BaseElement = HTMLElement>(
renderer: Renderer,
baseElement: BaseElement,
options: Options
): Element
declare function virtual(renderer: Renderer): Directive
BSD-2-Clause
2.8.1
lift does not need setter to be a StateUpdaterFAQs
Hooks for web components
The npm package @pionjs/pion receives a total of 343 weekly downloads. As such, @pionjs/pion popularity was classified as not popular.
We found that @pionjs/pion demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.